<template>
    <div class="bottom-outer">
      <div class="bottom-w">
        <ul class="bottom-t">
          <li class="bottom-h">
            <a href="https://www.dance365.com/aboutUs" target="_blank"
              >关于我们</a
            >
          </li>
          <li class="bottom-li">
            <a href="https://www.dance365.com/privacyStatement" target="_blank"
              >用户隐私权政策</a
            >
          </li>
          <li class="bottom-li">
            <a href="https://www.dance365.com/userAgreement" target="_blank"
              >用户服务协议</a
            >
          </li>
          <li class="bottom-li">
            <a href="https://www.dance365.com/contactUs" target="_blank"
              >联系我们</a
            >
          </li>
        </ul>
        <div class="bottom-m">
          <div class="icon">
            <i class="left"></i>
            <i class="right"></i>
          </div>
        </div>
        <div class="bottom-b">
          <div class="copyright">
            Copyright © 2010-2022 南京爱一格网络科技有限公司 版权所有
          </div>
          <div class="number">
            经营性许可证编号： 苏B2-20180515
            <img src="https://rs.dance365.com/jinying.png" alt="" />
            苏网文〔2021〕4647-106号
          </div>
          <div class="su">苏ICP备20036081号</div>
          <div class="public">
            <img src="https://rs.dance365.com/pc/gongan.png" alt="" />
            苏公网安备 32010602010735号
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: "Bottom",
  };
  </script>
  
  <script setup lang="ts"></script>
  
  <style scoped lang="scss">
  .bottom-outer {
    height: 257px;
    background-color: #221f23;
    .bottom-w {
      width: 1200px;
      height: 257px;
      padding: 24px 40px 18px;
      margin: auto;
      box-sizing: border-box;
      .bottom-t {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        li {
          color: #a4b5c1;
          font-size: 14px;
          text-decoration: none;
          padding: 0 100px;
          a {
            text-decoration: none;
            color: #a4b5c1;
            &:hover {
              color: #f93684;
            }
          }
        }
        .bottom-h {
          ~ .bottom-li {
            border-left: 1px solid white;
          }
        }
      }
      .bottom-m {
        .icon {
          width: 130px;
          margin: 28px auto 30px;
          overflow: hidden;
          .left {
            float: left;
            width: 26px;
            height: 24px;
            background: url("https://rs.dance365.com/img/weChat_normal.a1769059.svg")
              center center no-repeat;
            background-size: 100% 100%;
          }
          .right {
            float: right;
            width: 24px;
            height: 22px;
            background: url("https://rs.dance365.com/img/phone_normal.86835eeb.svg")
              center center no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .bottom-b {
        color: #a4b5c1;
        font-size: 14px;
        text-align: center;
        .number {
          margin: 14px 0;
          img {
            margin-left: 10px;
            width: 20px;
            height: 20px;
            vertical-align: middle;
          }
        }
        .public {
          margin-top: 10px;
          img {
            width: 14px;
            height: 14px;
            vertical-align: middle;
          }
        }
      }
    }
  }
  </style>
  